<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>YUMO.AI 验证码登录</title>
    <link rel="stylesheet" href="/css/common.css">
    <link th:href="@{/css/login.css}" rel="stylesheet">
    <link rel="stylesheet"
          href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/lib/theme-chalk/index.css">
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.4.0/all.min.css"
          rel="stylesheet">
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/vue/2.6.14/vue.min.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/index.js"></script>
</head>
<body>
<div class="login-container" id="sms_login_app" v-cloak>
    <div class="login-header">
        <div class="logo">
            <i class="fas fa-mobile-alt"></i>
        </div>
        <h2>验证码登录</h2>
        <p>支持自动注册：有账号则登录，无账号则自动注册</p>
    </div>

    <form id="smsLoginFrom">
        <!-- 手机号输入框 -->
        <div class="form-group">
            <label for="phone" class="input-label">手机号</label>
            <div class="highlight-box">
                <input type="tel" v-model="smsForm.phone" id="phone" name="phone" class="input-field"
                       placeholder="请输入11位手机号" maxlength="11"
                       @input="formatPhone"
                       required>
            </div>
        </div>
        <!-- 验证码输入框 -->
        <div class="form-group">
            <label for="code" class="input-label">验证码</label>
            <div class="code-input-group">
                <div class="highlight-box">
                    <input type="text" v-model="smsForm.code" id="code" name="code" class="input-field"
                           placeholder="请输入验证码" maxlength="4"
                           @input="formatCode"
                           required>
                </div>
                <button type="button" class="btn-send-code" :disabled="sendCodeDisabled" @click="sendSmsCode">
                    {{ sendCodeText }}
                </button>
            </div>
        </div>

        <!-- 登录按钮 -->
        <button type="button" id="smsLoginBtn" class="btn-login" @click="handleSmsLogin">登录</button>
    </form>

    <!-- 返回账号登录 -->
    <div class="other-login">
        <div class="divider">
            <span>其他登录方式</span>
        </div>
        <a th:href="@{/login(redirect=${param.redirect})}" class="sms-login-link">
            <i class="fas fa-user"></i>
            账号密码登录
        </a>
    </div>
</div>
<script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/axios/0.19.0/axios.min.js"></script>
<script th:src="@{/js/request.js}"></script>
<script th:src="@{/js/api_robot.js}"></script>
<script th:src="@{/js/sms-login.js}"></script>
</body>
</html>
